import React, { useState } from 'react'
import { Table, Button } from 'antd'
import { ColumnProps } from 'antd/lib/table'
import ItemModal from '~/components/item-modal'

let cacheRecord: any = {}

const colums = ({ selectedItems, setSelectedItems, setModalVisible }: any): ColumnProps<any>[] => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '物品编号',
    dataIndex: 'serialNo',
    align: 'center',
    render: (serialNo: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {serialNo}
      </a>
    )
  },
  {
    title: '物品名称',
    dataIndex: 'itemName',
    align: 'center',
    render: (itemName: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {itemName}
      </a>
    )
  },
  {
    title: '数量(单位)',
    dataIndex: 'itemStock',
    align: 'center',
    render: (itemName: any, record: any) => (
      <div>
        {record.itemStock.totalNumber} ({record.itemStock.unitName})
      </div>
    )
  },
  {
    title: '规格',
    align: 'center',
    dataIndex: 'specs'
  },
  {
    title: '特征',
    align: 'center',
    dataIndex: 'feature'
  },
  {
    title: '实物所在地',
    align: 'center',
    dataIndex: 'location'
  },
  {
    title: '库架编号',
    align: 'center',
    dataIndex: 'storeLocationNo'
  },
  {
    title: '备注',
    align: 'center',
    dataIndex: 'remark'
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    key: 'action',
    fixed: 'right',
    render: (_, record, index) => (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          selectedItems.splice(index, 1)
          setSelectedItems([...selectedItems])
        }}
      >
        删除
      </Button>
    )
  }
]

const WaitingList = ({ setSelectVisible, handleGetCastItems, selectedItems, setSelectedItems }: any) => {
  const [modalVisible, setModalVisible] = useState(false)
  return (
    <div>
      <Button
        type="primary"
        style={{ marginBottom: 10 }}
        onClick={() => {
          handleGetCastItems()
          setSelectVisible(true)
        }}
      >
        选择涉案财物
      </Button>

      <Table
        rowKey="id"
        dataSource={selectedItems}
        pagination={{
          size: 'default',
          total: selectedItems.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        bordered
        columns={colums({ selectedItems, setSelectedItems, setModalVisible })}
      />
      <ItemModal visible={modalVisible} setVisible={setModalVisible} record={cacheRecord} />
    </div>
  )
}

export default WaitingList
